<template>
  <article class="page">
    <headerbar>我的反馈
    </headerbar>
    <section class="frame-content-sub no-bg">

      <section class="inner-content pdv-9 pdh-4">

        <div class="input-row-wrap">
          <div class="name">标题：</div>
          <input v-model="data.title" readonly type="text">
        </div>

        <div class="input-row-wrap">
          <div class="name">内容：</div>
          <textarea v-model="data.content" readonly name="" id="" cols="30" rows="10"></textarea>
        </div>

        <div class="name" v-if="fileList && fileList.length >0">附件：</div>
        <ul class="list-item mui-content-padded flex-justify-start" v-if="fileList && fileList.length >0">
          <li class="enclosure-upload" v-for="item in fileList">
            <img v-if="isImage(item.fileName)" class="enclosure-upload-file" :src="item.url" @click="showImagePreview(item)"/>
            <img v-if="!isImage(item.fileName)" class="enclosure-upload-file" src="../../../../static/images/up_document.png" @click="downLoadFile(item)" />
            <p class="mui-ellipsis">{{item.fileName}}</p>
          </li>
        </ul>

        <div class="input-row-wrap" v-if="data.hhnr && data.hhnr !==''">
          <div class="name">回复内容：</div>
          <span>{{data.hhnr}}</span>
        </div>

        <div class="pdv-6"></div>

        <div class="pdv-5"></div>
      </section>

    </section>
  </article>
</template>

<script>
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import fileIcon from '../../../../static/images/up_document.png'
  import tools from '@/utils/tools'
  export default {
    name: 'demandSurveyFeedback',
    data () {
      return {
        data: {
          title: '',
          content: '',
          files: ''
        },
        attachmentList: [],
        fileList: [],
        id: ''
      }
    },
    created () {
      // this.data = this.$store.state.demandSurveyFeedbackDetail
      this.id = this.$route.params.id
      this.suggestDetail()
    },
    methods: {
      getFiles (files) {
        if (!files || files.trim() === '') {
          return []
        }
        return files.split(',')
      },
      downLoadFile (item) {
        console.log("item={}", item)
        let url = this.tools.getImgUrl(item.fileId)
        if (window.android && window.android.downloadFile) {
          window.android.downloadFile(url, item.fileName)
        }
      },
      getFile (fileId) {
        this.fetchService.sysFile(fileId).then(res => {
          if (res.code !== 0) {
            // return tools.tip(res.message)
          }
          // item.fileName = res.data.fileName
          // this.downLoadFile(item)
          let data = {
            fileId: fileId,
            fileName: res.data.fileName,
            url: this.tools.getImgUrl(fileId)
          }
          this.fileList.push(data)
        })
      },
      showImagePreview (item) {
        if (item.fileId.length < 1) {
          return false
        }
        let fileUrl = this.tools.getImgUrl(item.fileId)
        item.url = fileUrl
        let imgs = [fileUrl]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      },
      suggestDetail () {
        if (!this.id || this.id === '') {
          return
        }
        this.fetchService.suggestByid(this.id).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.data = res.data
          let list = this.getFiles(this.data.files)
          list.map((v) => {
            this.getFile(v)
          })
          // this.data.hhnr = '我们正在全力处理问题中，请等候！'
        })
      }
    }
  }
</script>

<style scoped>

</style>
